<template>
  <div  id="MemoItem">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-tab__panel">
          <div class="weui-tab__panel_top">
            <i @click="goBack" class="el-icon-arrow-left return-back"></i>
            <div class="top_title">
              <p>随笔</p>
            </div>
          </div>
          <div class="weui-tab__panel_bd">
           <template v-if="type==='display'">
             <div class="nav displayNav">
               <div class="createTime">今天傍晚 08:50</div>
               <div class="edit" @click="toEdit">
                 <div class="icon iconfont icon-edit"></div>
               </div>
             </div>
             <quill-editor
                           id="displayEditor"
                           v-model="content"
                           ref="myQuillEditor"
                           :options="editorOption"
                           @blur="onEditorBlur"
                           @focus="onEditorFocus"
                           @ready="onEditorReady">
             </quill-editor>
             <div class="operateTool">
               <van-tabbar>
                 <van-tabbar-item @click="Topset">
                   <van-icon class="iconfont" class-prefix="icon" name="guanbi" tag="div"></van-icon>
                   <span>置顶</span></van-tabbar-item>
                 <van-tabbar-item @click="deleteItem">
                   <van-icon class="iconfont" class-prefix="icon" name="delete2" tag="div"></van-icon>
                   <span>删除</span></van-tabbar-item>
                 <van-tabbar-item @click="toShare">
                   <van-icon class="iconfont" class-prefix="icon" name="quanxuan" tag="div"></van-icon>
                   <span>分享</span></van-tabbar-item>
               </van-tabbar>
             </div>
           </template>
            <template v-if="type==='newMemo'">

            </template>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MemoItem"
    ,data(){
      return{
        type:''
        ,content:''
        ,editorOption:{
          modules: {
            toolbar: null
          }
        }
      }
    }
    ,methods:{
      goBack(){
        this.$router.back();
      }
      ,onEditorBlur(e) {
        console.log(this.content)
      }
      ,onEditorFocus(e){
         this.type='edit'
      }
      ,onEditorReady(e){
        console.log(this.content)
      }
      ,toEdit(){

      }
      ,Topset(){

      }
      ,deleteItem(){

      }
      ,toShare(){

      }
    }
    ,mounted() {
      this.type = this.$route.query.type;
      this.content=JSON.parse(decodeURIComponent(this.$route.query.data)).content.html;
    }
  }
</script>

<style scoped>
   .nav{
    height:40px;
    padding:5px 10px;
    box-sizing: border-box;
    background: #62c9f8;
  }
   #displayEditor{
     height: calc( 100vh - 90px);
     padding-bottom: 50px;
   }
  .nav .save,.nav .createTime{
    display: inline-block;
    float: right;
    color: #fff;
    vertical-align: top;
    line-height: 30px;
  }
  .nav .title{
    display: inline-block;
    vertical-align: top;
    line-height: 30px;
    font-size: 15px;
    color: #fff;
    letter-spacing: 1px;
  }
  .nav .createTime{
    display: inline-block;
    float: left;
    color: #fff;
    vertical-align: top;
    line-height: 40px;
    font-size: 15px;
  }
  .nav .save .icon{
    font-size: 30px;
  }
  .nav .edit{
    display: inline-block;
    float: right;
    vertical-align: top;
    line-height:35px;
    margin-right:5px;
  }
  .nav .edit .icon{
    color: #fff;
    font-size: 22.5px;
  }
  .displayNav.nav{
    height: 45px;
  }
  .container .head{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #cdcdcd;
    padding: 0 5px;
    box-sizing: border-box;
    height: 55px;
  }
  .head .icon{
    display: inline-block;
    vertical-align: top;
    line-height: 55px;
    color: #464646;
    font-size: 30px;
  }
   .return-back{
     color: #fff;
   }
  .top_title p{
    color: #fff;
  }
</style>

<style>
  .ql-editor{
    padding: 10px 10px 0px 10px;
  }
  .van-tabs--line .van-tabs__wrap{
    border-bottom: 1px solid #eee;
  }
  .operateTool .icon {
    color: #333;
    position: relative;
    margin-bottom: 5px;
    font-size: 18px;
  }

  .operateTool .van-tabbar-item--active {
    color: #333;
  }
  .operateTool .van-tabbar {
    background-color: #f6f6f6;
  }

  .operateTool .van-tabbar-item__text {
    text-align: center;
    color: #333;
  }
  .btnWrapper{
    position: fixed;
    right: 30px;
    bottom: 30px;
  }
  .newMemo span{
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 32px;
    background-color: #62c9f8;
    color: #fff;
    border-radius: 50%;
  }
</style>
